<template>
  <div>
    <div :style="{ height: setting.options.height + 'px' }" :id="id"></div>
  </div>
</template>

<script>
  // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

  import { getGuid } from '@/utils/util'
  import { Column } from '@antv/g2plot'
  import { Getsqlcolumns } from '@/api/report/api'
  export default {
    name: 'G2Column',
    props: ['setting'],
    data() {
      return {
        id: getGuid(),
        columnPlot: undefined,
      }
    },

    watch: {
      'setting.options': {
        handler() {
          console.log(this.setting)
          // 修改最大宽度
          this.columnPlot.update({
            maxColumnWidth: this.setting.options.maxWidth,
          })
        },
        deep: true,
      },
    },

    // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
    mounted() {
      var that = this
      Getsqlcolumns({
        DbId: that.setting.options.dbId,
        Sql: that.setting.options.sql,
        isdata: true,
      }).then((res) => {
        if (res.isSuccess) {
          this.columnPlot = new Column(this.id, {
            data: res.content.data,
            autoFit: true,
            xField: that.setting.options.xField,
            yField: that.setting.options.yField,
            label: {
              // 可手动配置 label 数据标签位置
              position: 'middle', // 'top', 'bottom', 'middle',
              // 配置样式
              style: {
                fill: '#FFFFFF',
                opacity: 0.6,
              },
            },
            xAxis: {
              label: {
                autoHide: true,
                autoRotate: false,
              },
            },
            meta: {
              type: {
                alias: '类别',
              },
              sales: {
                alias: '销售额',
              },
            },
            maxColumnWidth: that.setting.options.maxWidth,
          })

          this.columnPlot.render()
        } else {
          fetch(
            'https://gw.alipayobjects.com/os/antfincdn/K0kfOzo4j%24/column.json'
          )
            .then((data) => data.json())
            .then((data) => {
              this.columnPlot = new Column(this.id, {
                data,
                autoFit: true,
                xField: 'type',
                yField: 'sales',
                maxColumnWidth: that.setting.options.maxWidth,
              })

              this.columnPlot.render()
            })
        }
      })
    },
  }
</script>
